<template>
	<view class="date">
		<text class="date-text">
		&emsp;选择入园时间&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2024.06
		</text>
	</view>
	<div class="hezi">
		<uni-card style="border-radius: 20rpx;">
		<div class="box" style="border-radius: 10rpx; width: 35px; height: 60px;"
			v-for="(item, index) in itemList"
			:key="index"
			:class="{ 'item': true, 'active': activeIndex === index }"
			@click="changeColor(index)"
		>
			{{ item }}
		</div>
		</uni-card>
	</div>
	<view class="date">
    <text class="date-text">
		&emsp;选择入园时段
		</text>
	</view>
	<view>
		<uni-card style="border-radius: 20rpx;">
		<div class="box1" style="border-radius: 10rpx; width: 160px; height: 27px;"
			v-for="(item, index2) in itemList2"
			:key="index2"
			:class="{ 'item': true, 'active': activeIndex2 === index2 }"
			@click="changeColor2(index2)"
		>
			{{ item }}
		</div>
		</uni-card>
	</view>
	<view>
		<button @click="togeren" class="shiduanqueren"  style="color: white; background-color: #8DCB6D;">
		时段确认
		</button>
	</view>
</template>

<script >
export default {
	data() {
		return {
			itemList: ['周六 01', '周日 02', '周一 03', '周二 04', '周三 05', '周四 06', '周五 07','周六 01', '周日 02', '周一 03', '周二 04', '周三 05', '周四 06', '周五 07'],
			activeIndex: null,
			itemList2: ['09:00-11:00 ','11:00-13:30 ','13:30-16:00 '],
			activeIndex2: null,
		};
	},
	methods: {
		changeColor(index) {
			this.activeIndex = index;
		},
		changeColor2(index2) {
			this.activeIndex2 = index2;
		}
	}
};
</script>

<script setup>
	let togeren = function() {
			uni.navigateTo({
				url: '/pages/leave/gerenyuyue'
			})
		}
</script>

<style scoped>
	.date-text{
		font-family: PingFangSC-Medium;
		font-weight: 550;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.box{
		display: inline-flex;
		justify-content: flex-end;
		padding-left: 1px;
		padding-right: 1px;
		margin-left: 4px;
		margin-top: 9px;
		margin-left: 4px;
		margin-right: 2px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.box1{
		display: inline-flex;
		justify-content: flex-end;
		margin-left: 4px;
		margin-top: 9px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 14px;
		color: #6B6B6B;
		letter-spacing: 0;
	}
	.item {
		background-color: #F5F5F5;
	}
	.item.active {
		background-color: #8DCB6D;
	}
	.shiduanqueren{
		font-family: PingFangSC;
		font-weight: bold;
		font-size: 15pxdwada;
		color: black;
		letter-spacing: 0;
		width: 700rpx;
		height: 90rpx;
		margin-top: 450rpx;
		justify-content: center;
		border-radius: 160px;
	}
	.yuyue1{
		margin-top: 50px;
		margin-bottom: 15px;
		height: 100px;
	}
</style>